<template>
  <div class="container">
    <el-dialog
      :title="articleId ? '编辑文章' : '新增文章'"
      :visible="isaddSkillsClose"
      width="50%"
      @close="addclosed"
    >
      <!-- 标题 -->
      <el-form
        ref="articleListRef"
        :model="addForm"
        :rules="cateRules"
        label-width="100px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="addForm.title"
            placeholder="请输入文章标签"
            clearable
          ></el-input>
        </el-form-item>
        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容">
          <quill-editor
            v-model="addForm.articleBody"
            :options="editorOption"
          ></quill-editor>
        </el-form-item>

        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            v-model="addForm.videoURL"
            placeholder="请输入视频地址"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addclosed">取 消</el-button>
        <el-button type="primary" @click="addClickOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addList, editList, previewList } from '@/api/hmmm/articles'

export default {
  name: 'articlesAdd',
  components: {},
  props: {
    isaddSkillsClose: {
      type: Boolean,
      required: true
    },
    articleId: {
      type: Number || Object,
      default: null
    }
  },
  data() {
    return {
      cateRules: {
        title: [
          { required: true, message: '标题名称不能为空', trigger: 'blur' }
        ]
      },
      addForm: {
        title: '',
        articleBody: '', // 文章正文
        videoURL: '' // 视频地址
      },
      // 富文本的配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [
              'blockquote',
              'code-block',
              'image',
              'video',
              'direction',
              { list: 'ordered' },
              { list: 'bullet' },
              { script: 'super' },
              { indent: '+1' }
            ]
          ]
        }
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    // close 事件
    addclosed() {
      // 关闭弹框
      this.$emit('update:isaddSkillsClose', false)
      // 重置数据
      this.$refs.articleListRef.resetFields()
      //
      this.$emit('update:articleId', null)
    },
    // 回显事件
    async getEditId(ids) {
      this.$emit('update:isaddSkillsClose', true)
      // this.$emit('update:articleId', ids)
      try {
        const res = await previewList({ id: ids })
        // console.log(res)
        this.addForm = res.data
        // this.$message.success('预览成功')
      } catch (err) {
        this.$message.error('预览失败')
      }
    },
    async addClickOk() {
      if (this.articleId) {
        try {
          // 编辑
          const data = {
            id: this.articleId,
            title: this.addForm.title,
            articleBody: this.addForm.articleBody,
            videoURL: this.addForm.videoURL
          }
          await editList(data)
          // console.log(res)
          // 让当前id的数据 为空
          this.$emit('update:articleId', null)
        } catch (error) {
          this.$message.info('取消修改')
        }
      } else {
        // 添加
        try {
          await addList(this.addForm)
          // console.log(res)
          // 重置表单
          // 关闭弹框
          // this.isaddSkillsClose = false
          // 让页面重新渲染
          // this.localArticleList()
          // this.$emit('updateList')
          this.$message.success('添加成功')
        } catch (error) {
          this.$message('添加失败')
        }
      }
      this.$emit('updateList')
    }
  },
  created() {},
  mounted() {}
}
</script>

<style scoped lang="less"></style>
